import { List, Row, Col, Button, Modal } from "antd";
import styles from './index.less';
import { FileFilled, FolderFilled } from '@ant-design/icons';

import { useState } from 'react';
import { getFlowZipFileList } from "../service";
import { useEffect } from "react";
import { Empty } from "antd";

export default (props) => {

    const { confirm } = Modal;
    const { onSuccess, id, loading } = props;
    const [backupDirectory, setBackupDirectory] = useState({ directorys: [] });
    const [uploadDirectory, setUploadDirectory] = useState({ directorys: [] });
    const notBackupDirectory = uploadDirectory.directorys.filter(i => !backupDirectory.directorys.map(i => i.path).includes(i.path));
    useEffect(() => {
        async function init() {
            const response = await getFlowZipFileList({ id });
            if (response.success) {
                const aa = response.data.filter(i => i.nodeType === 1);
                if (aa.length > 0) {
                    setBackupDirectory(aa[0]);
                }
                const aa2 = response.data.filter(i => i.nodeType === 2);
                if (aa2.length > 0) {
                    setUploadDirectory(aa2[0]);
                }
            }
        }
        init();
    }, [id])
    return <div>
        <Row gutter={[12]} style={{ marginBottom: "10px" }} justify={"end"}>
            <Col>

                <Button
                    loading={loading}
                    style={{marginRight:"10px"}}
                    onClick={() => {
                        if (notBackupDirectory.length > 0) {
                            confirm({
                                title: '未备份文件',
                                content: '有未备份文件,是否继续?',
                                onOk() {
                                    onSuccess(true);

                                }
                            })
                        }
                        else {
                            onSuccess(true);
                        }
                    }}
                    type="primary">
                    确认发布(IIS)
                </Button>

                <Button
                    loading={loading}
                    onClick={() => {
                        if (notBackupDirectory.length > 0) {
                            confirm({
                                title: '未备份文件',
                                content: '有未备份文件,是否继续?',
                                onOk() {
                                    onSuccess();

                                }
                            })
                        }
                        else {
                            onSuccess();
                        }
                    }}
                    type="primary">
                    确认发布(其他)
                </Button>

            </Col>


        </Row>

        <Row style={{ marginTop: "20px" }} gutter={[12]}>
            <Col span={12}>
                <div style={{ marginBottom: "12px" }}>上传的发布文件</div>

                {backupDirectory.isDeleted ? <Empty description="备份目录已删除" /> : <List
                    style={{ marginBottom: "12px" }}
                    size="small"
                    bordered
                    key={"list1"}
                    dataSource={uploadDirectory.directorys}
                    renderItem={(item) =>
                        <List.Item>
                            <div className={styles.directory}>
                                <span >
                                    {item.type === 1
                                        ? <FileFilled style={{ color: "#ff21b9", marginRight: "4px", fontSize: "11px" }} />
                                        : <FolderFilled style={{ color: "#54aeff", marginRight: "4px" }} />}

                                    {item.path === ".." ? "" : <span>
                                        {item.path.split("\\")[item.path.split("\\").length - 1]}

                                    </span>}


                                </span>


                            </div></List.Item>}
                />}

            </Col>
            <Col span={12}>
                <div style={{ marginBottom: "12px" }}>上传未备份文件</div>


                <List
                    style={{ marginBottom: "12px" }}
                    size="small"
                    bordered
                    key={"list2"}
                    dataSource={notBackupDirectory}
                    renderItem={(item) =>
                        <List.Item>
                            <div className={styles.directory}>
                                <span onClick={() => {
                                }}>
                                    {item.type === 1
                                        ? <FileFilled style={{ color: "#ff21b9", marginRight: "4px", fontSize: "11px" }} />
                                        : <FolderFilled style={{ color: "#54aeff", marginRight: "4px" }} />}

                                    {item.path === ".." ? "" : <span>
                                        {item.path}
                                        <span style={{ color: "red", marginLeft: "10px", fontSize: "12px" }}>未备份</span>
                                    </span>}

                                </span>
                            </div></List.Item>}
                />
            </Col>
        </Row>
    </div>
}